/* screen-1 */
.screen-1__heading,
.screen-1__phone,
.screen-1__shadow
{
    transition: all 1s;
}
.screen-1__heading_animation_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-1__heading_animation_done,
.screen-1__phone_animation_done,
.screen-1__shadow_animation_done
{
    opacity: 1;
    transform: translate(0,0);
}
.screen-1__phone_animation_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-1__shadow_animation_init{
    opacity: 0;
    transform: translate(0,100%);
}
/* screen-2 */
.screen-2__heading,
.screen-2__phone,
.screen-2__subheading
{
    transition: all 1s;
}
.screen-2__point{
    transition: all 0.5s .5s;
}

.screen-2__heading_animation_done,
.screen-2__phone_animation_done,
.screen-2__subheading_animation_done,
.screen-2__point_animation_done
{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__subheading_animation_init,
.screen-2__phone_animation_init
{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-2__heading_animation_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-2__point_animation_init{
    opacity: 1;
    transform: translate(-100%,0);
}
.screen-2__point_i_2_animation_init,
.screen-2__point_i_3_animation_init
{
    opacity: 1;
    transform: translate(100%,0);
}
/* screen-3 */
.screen-3__heading,
.screen-3__phone,
.screen-3__subheading,
.screen-3__features
{
    transition: all 1s;
}
.screen-3__features__item{
    transition: all 0.5s;
}
.screen-3__heading_animation_done,
.screen-3__phone_animation_done,
.screen-3__subheading_animation_done
{
    opacity: 1;
    transform: translate(0,0);
}
.screen-3__subheading_animation_init,
.screen-3__phone_animation_init
{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-3__heading_animation_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-3__features_animation_init{
    opacity: 0.5;
    transform: scale(0.5);
}
.screen-3__features_animation_done{
    opacity: 1;
    transform: scale(1.0);
}
.screen-3__features__item:hover{
    transform: scale(1.1);
    border-color: #fff;
}
/* screen-4 */
.screen-4__heading,
.screen-4__subheading
{
    transition: all 1s;
}
.screen-4__type__item_i_1{
    transition: all .5s;
}
.screen-4__type__item_i_2{
    transition: all 1s;
}
.screen-4__type__item_i_3{
    transition: all 1.5s;
}
.screen-4__type__item_i_4{
    transition: all 2s;
}
.screen-4__heading_animation_done,
.screen-4__subheading_animation_done
{
    opacity: 1;
    transform: translate(0,0);
}
.screen-4__subheading_animation_init
{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-4__heading_animation_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-4__type__item_i_1_animation_init,
.screen-4__type__item_i_2_animation_init,
.screen-4__type__item_i_3_animation_init,
.screen-4__type__item_i_4_animation_init
{
    opacity: 0;
}
.screen-4__type__item_i_1_animation_done,
.screen-4__type__item_i_2_animation_done,
.screen-4__type__item_i_3_animation_done,
.screen-4__type__item_i_4_animation_done
{
    opacity: 1;
}
/* screen-5 */
.screen-5__heading,
.screen-5__bg,
.screen-5__subheading
{
    transition: all 1s;
}

.screen-5__heading_animation_done,
.screen-5__bg_animation_done,
.screen-5__subheading_animation_done
{
    opacity: 1;
    transform: translate(0,0);
}
.screen-5__subheading_animation_init,
.screen-5__bg_animation_init
{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-5__heading_animation_init{
    opacity: 0;
    transform: translate(0,-100%);
}

.screen-2__point::before,
.screen-2__point::after{
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top:1px;
    left: 0;
    background-color: rgba(255, 0, 0, 0.4);
    border-radius: 50%;
    -webkit-animation: bounce 2s infinite;
}
.screen-2__point::before{
    -webkit-animation: bounce 2s infinite 1s;
}
.screen-2__point_i_1::before,
.screen-2__point_i_1::after
{
    left:200px ;
}
@-webkit-keyframes bounce{
    0%,100%{
        transform: scale(0);
    }
    50%{
        transform: scale(1); 
    }
}
/* 导航条样式变动 */
.header{
    transition: all 1s;
}
.header_status_black{
    color:#fff;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
/* 导航栏背景是黑色的时候字体颜色 */
.header_status_black .header__nav-item,
.header_status_black .header__logo{
    color: #fff;
}
/* 选中激活的条目 */
.header_status_black .header__nav-item_status_active{
    color: red;
}
.header_status_black .header__nav-item:hover{
    transition: all 1s;
    color: red;
}
/* 侧边栏的样式 */
.outline{
    transition: all 1s;
    transform: translate(100%,0);
}
.outline_status_in{
    transform: translate(0,0);
}
.outline__item{
    transition: all 1s;
}
